/**
 * @class Ext.window.Window
 */

/**
 * ui: 'nx-inset'
 */
@include extjs-window-ui(
  $ui: 'nx-inset',

  $ui-padding: 12px 12px 0 12px,
  $ui-header-padding: 10px 10px 8px 14px
);

.x-toast {
  border: none;
  .x-autocontainer-innerCt {
    padding: 0 !important;
    display: flex;
  }
  .icon {
    color: $iq-grey-100;
    float: left;
    font-size: 1.5em;
    padding: 0.4em;
    &:before {
      vertical-align: middle;
    }
  }
  .text {
    margin: 0.5em;
    align-self: center;
  }
  .dismiss {
    font-size: 1em;
    margin: 0.6em 0.5em auto auto;
    opacity: 0.35 ;
    &:hover {
      opacity: 1;
      a {
        text-decoration: none;
      }
    }
  }
}

.x-toast.success {
  background-color: $iq-grey-100;
  border: thin solid $iq-green-500;
  .icon {
    background-color: $iq-green-500;
  }
  .text {
    color: $iq-green-700;
  }
  .dismiss a {
    color: $iq-green-500;
  }
}

.x-toast.info {
  background-color: $iq-blue-100;
  border: thin solid $iq-blue-500;
  .icon {
    background-color: $iq-blue-500;
  }
  .text {
    color: $iq-blue-700;
  }
  .dismiss a {
    color: $iq-blue-500;
  }
}

.x-toast.warning {
  background-color: $iq-yellow-100;
  border: thin solid $iq-yellow-500;
  .icon {
    background-color: $iq-yellow-500;
  }
  .text {
    color: $iq-yellow-700;
  }
  .dismiss a {
    color: $iq-yellow-500;
  }
}

.x-toast.error {
  background-color: $iq-red-100;
  border: thin solid $iq-red-500;
  .icon {
    background-color: $iq-red-500;
  }
  .text {
    color: $iq-red-700;
  }
  .dismiss a {
    color: $iq-red-500;
  }
}

// Fixed modals for the visual style guide
.fixed-modal {
  top: 0 !important;
}

// Remove footer toolbar spacing
.x-window-body .x-toolbar-footer {
  padding-left: 0 !important;
}
